<template>
  <div class="shop-assistant-manage-wrap">

    <van-list
      v-model="loading"
      :finished="finished"
      @load="onLoad"
      class="van-shop-assistant-item"
    >
      <div class="shop-assistant-list" v-for="(assistant,index) in assistantList" :key="index">

        <div class="shop-assistant-item-box1">
          <div class="shop-assistant-item-info" :class="{'shop-assistant-item-close':assistant.assistMark}">
            <img :src="assistant.userUrl" class="pic1" v-if="assistant.userUrl"/>
            <span class="pic2" v-else></span>

            <span class="shop-assistant-name">{{assistant.userName}}</span>
            <span class="shop-assistant-phone">{{assistant.userTel}}</span>
            <img src="../../../images/call.png" class="pic3" @click="callMobile(assistant.userTel)"/>

            <div class="down-box" v-if="assistant.assistMark" @click="open(index)">
              <img src="../../../images/down_down.png" class="pic4"/>
            </div>
            <div class="down-box" v-else @click="close(index)">
              <img src="../../../images/down_up.png" class="pic4"/>
            </div>
          </div>
        </div>


        <div class="shop-assistant-item-box2" v-show="!assistant.assistMark">
          <span class="entry-time">入店日期：{{assistant.time}}</span>
          <button type="button" class="dismiss-btn" @click="dismissShop(assistant.id,assistant.userName)">辞退</button>
        </div>
      </div>
    </van-list>


    <div class="shop-opt-btn-box">
      <span class="invite-record" @click="shopInviteRecordPage">邀请记录</span>
      <div class="invite-shop-box" @click="shopInvitePage">
        <img src="../../../images/btn_add.png" class="pic5"/>
        <span class="invite-shop">店员邀请</span>
      </div>

    </div>

    <v-empty :logo="require('../../../images/no_data.png')" title="没有数据记录~"
             v-if="assistantList.length == 0 && !loading"></v-empty>

    <v-warn type="1" title="辞退店员" :content="dismissContent" :value="showDismiss" confirmText="确定"
            @cancel="hideDismissShop"
            @confirm="showDismissShop"></v-warn>
  </div>
</template>

<script>
  import {dismissShopUser, getShopAssistantList} from "../../../axios/api";
  import {formatDate} from "../../../config/util";
  import empty from "../../../components/empty";
  import warn from "../../../components/warn";

  export default {
    inject: ['reload'],
    data() {
      return {
        assistantUrl: "",
        userMark: "",
        assistantList: [],
        page: 1,
        size: 20,
        loading: false,
        finished: false,
        dismissContent: "",
        showDismiss: false,
        shopUserId: ""
      }
    },
    created() {
      let base64 = require('js-base64').Base64;
      this.userMark = base64.decode(sessionStorage.getItem("userMark"));
    },
    methods: {
      onLoad() {
        if (!this.timer) {
          this.timer = setTimeout(() => {
            this.queryShopAssistantList();
            this.timer = null;
          }, 500)
        }
      },
      queryShopAssistantList() {//获取店员列表
        let params = {
          "sgin": this.userMark,
          "page": this.page,
          "size": this.size
        };
        getShopAssistantList(params).then((res) => {
          if (res.code == 0) {
            if (res.data != null && res.data.length > 0) {
              this.assistantList = this.assistantList.concat(res.data);
              this.assistantList.forEach((value) => {
                this.$set(value, "assistMark", true);
                value.time = formatDate(new Date(value.time), 'yyyy-MM-dd');
              });

              this.loading = false;
              this.page++;
            } else {
              this.loading = false;
              if (this.assistantList.length >= res.data.length) {
                this.finished = true;
              }
            }
          } else {
            this.$vux.toast.text(res.msg, "middle");
          }
        });
      },
      open(index) {//展开
        for (let i = 0, length = this.assistantList.length; i < length; i++) {
          if (index == i) {
            this.assistantList[i].assistMark = false;
            break;
          }
        }
      },
      close(index) {//关闭
        for (let i = 0, length = this.assistantList.length; i < length; i++) {
          if (index == i) {
            this.assistantList[i].assistMark = true;
            break;
          }
        }
      },
      dismissShop(id, name) {//辞退
        this.shopUserId = id;
        this.dismissContent = `确定辞退店员${name}？`;
        this.showDismiss = true;
      },
      callMobile(phone) {
        window.location.href = 'tel://' + phone;
      },
      showDismissShop() {
        this.showDismiss = false;
        this.$vux.loading.show({
          text: '加载中',
        });
        let params = {
          "sgin": this.userMark,
          "id": this.shopUserId,
        };
        dismissShopUser(params).then((res) => {
          this.$vux.loading.hide();
          if (res.code == 0) {
            if (res.data == 1) {
              this.reload();
            } else {
              this.$vux.toast.text("辞退店员失败，请重试", "middle");
            }
          } else {
            this.$vux.toast.text(res.msg, "middle");
          }
        });
      },
      hideDismissShop() {
        this.showDismiss = false;
      },
      shopInvitePage() {//邀请页
        this.$router.push("/shopInvite");
      },
      shopInviteRecordPage() {//记录页
        this.$router.push("/shopInviteRecord");
      }
    },
    components: {
      "v-empty": empty,
      "v-warn": warn,
    }
  }
</script>

<style lang="less" scoped>
  @import "../../../assest/mixin";

  .shop-assistant-manage-wrap {
    .wh(100%, 100%);
    background: @talent-theme-bg-color;
    .shop-assistant-list {
      display: flex;
      flex-direction: column;
      .wh(100%, auto);
      .shop-assistant-item-box1 {
        .wh(100%, auto);
        background: #FFF;
        .shop-assistant-item-info {
          display: flex;
          align-items: center;
          .wh(96.8%, 1.333rem);
          background: #FFF;
          margin-left: 0.32rem;
          .pic1 {
            .wh(0.88rem, 0.88rem);
            border-radius: 50%;
          }
          .pic2 {
            .wh(0.88rem, 0.88rem);
            background: rgba(242, 242, 242, 1);
            border-radius: 50%;
          }
          .shop-assistant-name {
            .ellipsis(2.4rem);
            padding-left: 0.387rem;
            padding-right: 0.347rem;
            .size-color(0.427rem, rgba(51, 51, 51, 1));
          }
          .shop-assistant-phone {
            .size-color(0.373rem, rgba(153, 153, 153, 1));
          }
          .pic3 {
            margin-left: 0.8rem;
            .wh(0.533rem, 0.533rem);
          }
          .down-box {
            margin-left: auto;
            margin-right: 0.32rem;
            .fj(center, center);
            .wh(0.8rem, 0.8rem);
            .pic4 {
              .wh(0.373rem, 0.373rem);
            }
          }
        }
        .shop-assistant-item-close {
          border-bottom: 0.027rem solid #f5f5f5;
        }
      }
      .shop-assistant-item-box2 {
        display: flex;
        align-items: center;
        background: #f5f5f5;
        .wh(100%, 1.333rem);
        .entry-time {
          padding-left: 0.32rem;
          .size-color(0.347rem, rgba(153, 153, 153, 1));
        }
        .dismiss-btn {
          margin-left: auto;
          margin-right: 0.32rem;
          .wh(1.333rem, 0.64rem);
          border: 0.027rem solid rgba(128, 128, 128, 1);
          border-radius: 0.32rem;
          .size-color(0.347rem, rgba(128, 128, 128, 1));
          background: #f5f5f5;
        }
      }
    }
    .shop-opt-btn-box {
      display: flex;
      align-items: center;
      position: fixed;
      bottom: 0;
      .wh(100%, 1.28rem);
      .invite-record {
        flex: 1;
        height: 1.28rem;
        line-height: 1.28rem;
        text-align: center;
        .size-color(0.453rem, rgba(102, 102, 102, 1));
        background: rgba(255, 255, 255, 1);
      }
      .invite-shop-box {
        flex: 1;
        height: 1.28rem;
        .fj(center, center);
        background: rgba(60, 175, 255, 1);
        .pic5 {
          .wh(0.533rem, 0.533rem);
        }
        .invite-shop {
          padding-left: 0.333rem;
          .size-color(0.453rem, rgba(255, 255, 255, 1));
        }
      }
    }
  }
</style>
